<template>
	<view class="content l_pages">
		<jnavbar :title="'选择门店'"></jnavbar>
		<scroll-view class="page_container" scroll-y>
			<!-- <map style="width: 100%; height: 300px;" scale='13' 
			show-location enable-scroll @tap="bindtap" @callouttap="callouttap" @regionchange="regionchange" @updated="updated"		
			:latitude="latitude" :longitude="longitude" :markers="markers"></map> -->
			<view class="list uni-flex-column">
				<view class="item uni-flex-row uni-flex-title" v-for="(item, i) in storelist" :key="i" @click="selectstore(item)" v-if="item.name">
					<view class="uni-flex-row">
						<!-- <image src="../../../static/hch-position/1.jpg" mode=""></image> -->
						<view class="uni-flex-column">
							<text class="u-font-lg">{{ item.name }}</text>
							<text class="u-font-md m_10">{{ item.district.replace(/,/g, '') }}{{ item.address }}</text>
							<block v-if="sendtype == 3">
								<!-- 111 -->
								<text class="u-font-md" v-if="Number.isNaN(Number(item.price))" style="color: #ff3c29;">{{ item.price }}</text>
								<text class="u-font-md" v-else>
									配送费:
									<text style="color: #ff3c29;">￥{{ item.price }}</text>
								</text>
							</block>
						</view>
					</view>

					<view :class="item.checked ? 'active' : ''"><text class="iconfont el-sc-dui4"></text></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			store: {},
			storeFlag: false,
			storeAdFlag: false,
			distanceL: 0, //附近店门的距离
			controls: [],
			latitude: 28.017589,
			longitude: 120.745713,
			storelist: [],
			storeData: [],
			sendtype: 0,
			markers: [
				// //门店在地图上的标记 以下字段必填
				// {
				// 	id: 1,
				// 	latitude: 24.4483294023427,
				// 	longitude: 118.08479034393311,
				// 	iconPath: '../../../static/store.png',
				// 	callout: {
				// 		content: '门店XXXXX1号店',
				// 		borderRadius: 10,
				// 		padding: 10,
				// 		display: 'ALWAYS'
				// 	}
				// },
				// {
				// 	id: 2,
				// 	latitude: 24.4558,
				// 	longitude: 118.12266,
				// 	iconPath: '../../../static/store.png',
				// 	callout: {
				// 		content: '门店XXXXX2号店',
				// 		borderRadius: 10,
				// 		padding: 10,
				// 		display: 'ALWAYS'
				// 	}
				// }
			]
		};
	},

	async onLoad(e) {
		await this.$getWx;
		let _this = this;

		let allstorelist = JSON.parse(uni.getStorageSync('storelist'));
		let storelist = allstorelist[e.id];

		this.sendtype = e.sendtype;
		if (e.sendtype == 3) {
			let city_freight_list = JSON.parse(uni.getStorageSync('city_freight_list'));
			let list = city_freight_list.filter(a => a[0] == e.id);
			let s_list = list[0][1];
			storelist.forEach(c => {
				let d = s_list.filter(v => v[0][1] == c.id);

				if (d.length > 0) {
					c.price = d[0][1];
				} else {
					c.price = '未配置同城配送';
				}
			});
		}
		this.storelist = storelist;
		// if(this.storelist&&this.storelist.length>0){
		// 	this.storelist.forEach(a=>{
		// 		this.markers.push({
		// 			id:a.id,
		// 			latitude:a.latitude,
		// 			longitude:a.longitude,
		// 			iconPath:'/static/images/store.png',
		// 			width:'30',
		// 			callout:{
		// 				content:a.name,
		// 				borderRadius:10,
		// 				padding:10,
		// 				display:"ALWAYS",
		// 			}
		// 		})
		// 	})
		// 	console.log(this.markers)
		// }

		this.id = e.id;
	},
	methods: {
		selectstore(item) {
			if (this.sendtype == 3 && Number.isNaN(Number(item.price))) {
				uni.showToast({
					title: '不符合配送条件',
					icon: 'none'
				});
				return false;
			}
			this.storelist.forEach(a => {
				a.checked = false;
			});
			item.checked = true;
			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];
			prevPage.$vm.storelist[this.id] = this.storelist;
			if (this.sendtype == 3) {
				prevPage.$vm.selectstoredata_city = item;
			} else {
				prevPage.$vm.selectstoredata = item;
			}

			// // #ifdef  MP-WEIXIN
			// prevPage.data.storelist[this.id]=this.storelist;
			// // prevPage.data.selectstoredata = item;
			// prevPage.setData({
			// 	selectstoredata:item
			// })
			// // #endif

			uni.navigateBack({
				delta: 1
			});
			prevPage.$vm.Editcart(item, this.id);
		},
		// 点击了门店信息
		storeDesEvn() {
			uni.showToast({
				title: '自己自定义跳门店详情页介绍',
				duration: 2000,
				icon: 'none'
			});
		},
		// 点击气泡
		callouttap(e) {
			console.log(e);
			this.storeFlag = true;
			this.storeAdFlag = false;
			for (let i = 0; i < this.storeData.length; i++) {
				const ele = this.storeData[i];
				if (ele.id == e.detail.markerId) {
					this.store = ele;
					break;
				}
			}
		},
		// 点击地图
		bindtap(id) {
			this.storeFlag = false;
			// this.storeAdFlag=true;
		},
		// 隐藏广告图片
		hideAd() {
			this.storeAdFlag = false;
		},
		updated() {
			let _this = this;
			uni.getLocation({
				type: 'gcj02', //返回可以用于wx.openLocation的经纬度
				success: function(res) {
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					_this.nearDistance(_this.markers, _this.latitude, _this.longitude);
				},
				fail: function(res) {
					console.log(res);
				}
			});
		},
		// 改变视野时改变经纬度
		regionchange(e) {
			let _this = this;
			// 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
			var mapCtx = wx.createMapContext('myMap', this);
			mapCtx.getCenterLocation({
				success: function(res) {
					_this.centerLatitude = res.latitude;
					_this.centerLongitude = res.longitude;
					_this.nearDistance(_this.markers, _this.centerLatitude, _this.centerLongitude);
				},
				fail: function(res) {
					console.log(res);
				}
			}); //获取当前地图的中心经纬度
		},
		// 两点间距离
		distance(la1, lo1, la2, lo2) {
			var La1 = (la1 * Math.PI) / 180.0;
			var La2 = (la2 * Math.PI) / 180.0;
			var La3 = La1 - La2;
			var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
			s = s * 6378.137; //地球半径
			s = Math.round(s * 10000) / 10000;
			return s;
		},
		// 计算最近的距离
		nearDistance(array, centerLatitude, centerLongitude) {
			let temp = [];
			for (let i = 0, l = array.length; i < l; i++) {
				const element = array[i];
				let d = this.distance(element.latitude, element.longitude, centerLatitude, centerLongitude);
				temp.push(d);
			}
			this.distanceL = Math.min.apply(null, temp);
		}
	}
};
</script>
<style lang="scss" scoped>
.list {
	.item {
		font-size: 30rpx;
		color: #333;
		background: #fff;
		margin: 30rpx auto 0;
		width: 686rpx;
		padding: 20rpx;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}
		.iconfont {
			font-size: 40rpx;
		}
		.active {
			.iconfont {
				color: #ff3c29;
			}
		}
	}
}

// .content {
//   text-align: center;
//   height: 400rpx;
// }
.page-section {
	z-index: 0;
}
.store-tips {
	width: 600rpx;
	height: 100rpx;
	margin: 10rpx auto;
	border-radius: 10rpx;
	position: absolute;
	top: 10rpx;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
	overflow: hidden;
	.store-des-box {
		background: #fff;
	}
	.store-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		float: left;
	}
	.store-des {
		padding-top: 8rpx;
		float: left;
		line-height: 1;
		font-size: 22rpx;
		color: #666;
		padding-left: 20rpx;
		.store-name {
			font-weight: 600;
			color: deeppink;
		}
	}
	.store-clear {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 7rpx;
		right: 7rpx;
		margin: 30rpx;
	}
}
.address-icon {
	width: 38rpx;
	height: 40rpx;
	position: absolute;
	top: 22%;
	left: 50%;
	z-index: 2;
	margin-bottom: -20rpx;
	margin-left: -20rpx;
}
.near-num {
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	position: absolute;
	top: 17%;
	left: 50%;
	z-index: 2;
	font-size: 24rpx;
	background: #fff;
	transform: translate(-50%, 0);
}
.m_10 {
	margin: 10rpx 0;
}
</style>
